<script setup>
//定义响应式变量
const message = ref('');
const orderUuid = ref('');

//跳转到常见问题
const goHome = () => {
  uni.reLaunch({
    url: '/pages/customer/customer'
  });
};

/**
 * 生命周期函数--监听页面加载
 */
onLoad((options) => {
  if (options.msg) {
    message.value = options.msg;
  } else {
    message.value = '网络繁忙';
  }
  if (options.orderUuid != null && options.orderUuid != '') {
    orderUuid.value = options.orderUuid;
  }
});
</script>

<template>
  <view class="wrap">
    <image class="img" src="@/static/images/icon_error.png"></image>
    <text class="p1">{{ message }}\r\n</text>
    <text class="p2">请检查资金是否充足或者联系客服处理</text>
    <text class="p3">订单编号:{{ orderUuid }}</text>
  </view>
  <view class="go" @click="goHome">
    <view class="scanText">帮助中心</view>
  </view>
</template>

<style lang="scss">
$light-color: #ececec;
page {
  height: 100%;
  background-color: $light-color;
}
.wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 0.5rem;
  .img {
    width: 10rem;
    height: 10rem;
    margin-top: 6rem;
  }
  .p1 {
    font-size: 36rpx;
    margin-top: 3rem;
    text-align: center;
    line-height: 1.5rem;
  }
  .p2 {
    font-size: 30rpx;
    margin-top: 0.3rem;
    color: #a1a1a1;
  }
  .p3 {
    margin-top: 0.3rem;
    font-size: 30rpx;
    color: #a1a1a1;
  }
}

.go {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 80rpx auto;
  width: 650rpx;
  height: 90rpx;
  border-radius: 50rpx;
  background-color: #2185f5;
}
.scanText {
  color: #fff;
  font-size: 36rpx;
  line-height: 80rpx;
  text-align: center;
}
</style>
